<template>
  <div>
    <CategorySelector :disabledSelector="visible===1"></CategorySelector>
    <el-card style="margin-top:10px">
      <SpuList v-if="visible===1" @changeCompon='changeVisible'></SpuList>
      <SpuForm v-if="visible===2" @changeCompon='changeVisible'></SpuForm>
      <SkuForm v-if="visible===3"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
import SpuForm from './components/SpuForm.vue'
import SpuList from './components/SpuList.vue'
import SkuForm from './components/SkuForm.vue' 
export default {
    name:'SpuPage',
    components:{CategorySelector,SpuForm,SpuList,SkuForm}
}
</script>

<script lang="ts" setup>
import {ref} from 'vue'
const visible = ref(1)

const changeVisible = (val:number)=>{
  visible.value = val
}
</script>

<style>

</style>